<template>
  <!-- html结构 -->
  <!-- 有且只有一个根元素 -->
  <div class="father">
    <!-- <div class="bigBrother">{{ msg }}</div>
    <div>{{ obj.num }}</div>
    <div>{{ msg.toUpperCase() }}</div>
    <div>{{ obj.age >= 18 ? '成年' : '未成年' }}</div> -->

    <!-- <a v-bind:href="url">学前端来黑马</a> -->

    <!-- v-bind简写 -->
    <a :href="url">学前端来黑马</a>
  </div>
</template>

<script>
// js代码
export default {
  //data一定是一个函数，并且返回一个对象
  data() {
    return {
      msg: 'taikula',
      obj: {
        num: 999,
        age: 18,
      },
      url: 'http://www.itcast.cn',
    }
  },
}
</script>

<style lang="less">
/* css样式 */
// 如果要使用less语法，需要在属性中写上lang="less"
.father {
  .bigBrother {
    color: #087;
  }
}
</style>
